<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>WebGL2 - No Data - Triangles Circles</title>
    <link type="text/css" href="resources/webgl-tutorials.css" rel="stylesheet" />
  </head>
  <body>
    <canvas id="c"></canvas>
  </body>
</html>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webgl2fundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="resources/webgl-utils.js"></script>
<script>
'use strict';
const gl = document.querySelector('#c').getContext('webgl2');

const vs = `#version 300 es
uniform int numVerts;
uniform vec2 resolution;

#define PI radians(180.0)

const int numSlices = 8;
const int numVertsPerCircle = numSlices * 3;

vec2 computeCircleTriangleVertex(int vertexId) {
  int sliceId = vertexId / 3;
  int triVertexId = vertexId % 3;
  int edge = triVertexId + sliceId;
  float angleU = float(edge) / float(numSlices);  // 0.0 to 1.0
  float angle = angleU * PI * 2.0;
  float radius = step(float(triVertexId), 1.5);
  return vec2(cos(angle), sin(angle)) * radius;
}

void main() {
  int circleId = gl_VertexID / numVertsPerCircle;
  int numCircles = numVerts / numVertsPerCircle;

  float u = float(circleId) / float(numCircles);  // goes from 0 to 1
  float angle = u * PI * 2.0;                     // goes from 0 to 2PI
  float radius = 0.8;

  vec2 pos = vec2(cos(angle), sin(angle)) * radius;

  vec2 triPos = computeCircleTriangleVertex(gl_VertexID) * 0.1;
  
  float aspect = resolution.y / resolution.x;
  vec2 scale = vec2(aspect, 1);
  
  gl_Position = vec4((pos + triPos) * scale, 0, 1);
}
`;

const fs = `#version 300 es
precision highp float;

out vec4 outColor;

void main() {
  outColor = vec4(1, 0, 0, 1);
}
`;

// setup GLSL program
const program = webglUtils.createProgramFromSources(gl, [vs, fs]);
const numVertsLoc = gl.getUniformLocation(program, 'numVerts');
const resolutionLoc = gl.getUniformLocation(program, 'resolution');

// Make a buffer with just a count in it.

const numVerts = 8 * 3 * 20;

// draw
function render(time) {
  time *= 0.001;  // convert to seconds

  webglUtils.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  gl.useProgram(program);

  // tell the shader the number of verts
  gl.uniform1i(numVertsLoc, numVerts);
  // tell the shader the resolution
  gl.uniform2f(resolutionLoc, gl.canvas.width, gl.canvas.height);

  const offset = 0;
  gl.drawArrays(gl.TRIANGLES, offset, numVerts);
}
render();
</script>

